import React, {Component} from "react";
import './index.css'
import CommentInput from "@/NewComment/components/Input";
import CommentHeader from "@/NewComment/components/CommentHeader";
import List from "@/NewComment/components/List";
import {DEFAULT} from "@/NewComment/constants";
import {random} from 'lodash'
import {produce} from "immer";


// const obj = {
//   msg: {
//     name: '黑马'
//   },
//   age: {
//     show: '传智'
//   }
// }
//
// const newObj1 = {
//   ...obj,
//   msg: {
//     ...obj.msg,
//     age: '123'
//   }
// }
//
//
// const newObj = produce(state => {
//   state.msg.name = '杭州'
// })(obj)
// console.log(obj)
// console.log(newObj)
//
// console.log(obj === newObj)
// console.log(obj.msg === newObj.msg)
// console.log(obj.age === newObj.age)


export default class Comment extends Component {
  // 规范 ==>
  state = {
    // 当前用户
    user: {
      name: '清风徐来',
      vip: true,
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png'
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content: '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: '2021/10/12 10:10:23',
        vip: true,
        collect: false
      },
      {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar: 'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content: '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: '2021/09/23 15:12:44',
        vip: false,
        collect: true
      },
      {
        id: 102,
        name: '清风徐来',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content: '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: '2021/07/01 00:30:51',
        vip: true,
        collect: false
      }
    ],
    active: DEFAULT // 保存的排序类型 time/default
  }

  changeActive = (status) => {
    return () => {
      this.setState({
        active: status
      })
    }
  }

  addComment = (content) => {
    const newComment = {
      time: new Date(),
      content,
      ...this.state.user,
      id: random(100, 1000),
      collect: false
    }

    this.setState(produce(state => {
      state.comments.push(newComment)
    }))
  }

  delComment = id => () => {
    //  执行删除数据的操作
    this.setState({
      comments: this.state.comments.filter(item => item.id !== id)
    })
  }

  changeCollect = id => () => {

    // 1、使用produce实现收藏的切换
    this.setState(produce(state => {
      const currentComment = state.comments.find(item => item.id === id)
      currentComment.collect = !currentComment.collect
    }))

    // 2、自己手动覆盖数据
    // this.setState({
    //   comments: this.state.comments.map(item => {
    //     if (item.id === id) {
    //       return {
    //         ...item,
    //         collect: !item.collect
    //       }
    //     }
    //     return item
    //   })
    // })
  }

  render() {
    return (
      <div className="comments">
        <h3 className="comm-head">评论</h3>
        <CommentInput
          addComment={this.addComment}
        />
        <CommentHeader
          // 当前的active状态
          active={this.state.active}
          len={this.state.comments.length}
          // 修改active属性的方法
          changeActive={this.changeActive}
        />
        {/*排序的类型传递给子组件*/}
        <List
          changeCollect={this.changeCollect}
          active={this.state.active}
          user={this.state.user}
          comments={this.state.comments}
          delComment={this.delComment}
        />
      </div>
    );
  }
}
